const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // 模式
  // mode: 'development',
  mode: 'production',

  // 入口 
  // entry: './src/index.js'
  entry: {
    xxx: './src/index.js',
    // yyy: './src/index2.js',
  },
  // 出口
  output: {
    path: path.resolve('dist'),
    filename: 'static/js/[name]-[contenthash:8].js',
    clean: true
  },

  // 模块加载器
  module: {
    rules: [
      // js
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // css
      {
        test: /\.css$/,
        use: [
          // "style-loader", // js => <style>
          'vue-style-loader',
          "css-loader" // css => js
        ],
      },
      // less
      {
        test: /\.less$/,
        use: [
          // "style-loader", // js => <style>
          'vue-style-loader',
          "css-loader", // css => js
          'less-loader', // less => css
        ],
      },
      // vue
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  // 插件
  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ],

  devServer: {
    port: 8888,
    open: true
  }
}